<template>
    <section class="footer">
        <b-container>
            <b-row>
                <b-col sm="12" md="2">
                    <div class="footer-log"><img class="logo" src="~assets/images/logo.png"/></div>
                </b-col>
                <b-col sm="12" md="8">
                    <div class="nav-flex-box">
                        <div class="footer-nav">
                            <nuxt-link to="#">关于乐游</nuxt-link>
                            <nuxt-link to="#">团队介绍</nuxt-link>
                            <nuxt-link to="#">媒体报道</nuxt-link>
                            <nuxt-link to="#">加入乐游</nuxt-link>
                        </div>
                    </div>
                </b-col>
                <b-col sm="12" md="2">
                    <div class="footerqrcode"><img src="~assets/images/qrcode.jpg" alt=""></div>
                </b-col>
            </b-row>
            <b-row>
                <div class="footercopy">Copyright ©2013-2018 千图网 沪ICP备10011451号-6上海工商 安全实名验证 信用网站</div>
            </b-row>
        </b-container>
    </section>
</template>

<script>
export default {
    
}
</script>



<style lang="less">
.footer{
    width:100%;
    height:auto;
    background: #1d1d1d;
    padding:50px 0;
    .footer-log{
        width:120px;
        margin:0 auto;
        img{
            width:100%;
            display: block;
        }
    }
    .nav-flex-box{
        display:flex;
        .footer-nav{
            width:100px;
            text-align: center;
            a{
                color:#999;
                display: block;
                line-height: 40px;
                font-size:14px;
            }
        }
        @media (max-width: 768px){
            .footer-nav{
                margin:20px auto;
            }
        }
    }
    .footerqrcode{
        width:100px;
        height:100%;
        margin:0 auto;
        position: relative;
        img{
            width:100%;
            position: absolute;
            bottom:0;
            left:0;
        }
        @media (max-width: 768px){
            img{
                position: relative;
            }
        }
    }
    
    .footercopy{
        text-align: center;
        color:#999;
        width:100%;
        font-size:14px;
        margin-top:100px;
    }
}
</style>

